<template>
  <div id="siderbar">
    <ul>
      <li  :class="activeMenu == nav.index ?  'active-nav' : '' " @click="to(nav)" v-for="(nav, index) in navs" :key="index">
        <i :class="nav.icon"></i>
        <span class="nav-label">{{nav.label}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import navs from './navs'
  import {mapGetters} from 'vuex'
  import {acmModel} from '@/api/models.js'
  import requestConfig from '@/api/config.js'
  export default {
    data() {
      return {
        uniqueOpend: true,
        activeMenu: '1-1',
        navs: navs.navs,
        collapseTransition: true
      };
    },
    computed: {
      ...mapGetters('setting', {
        isCollapse: 'sidebarCollapse'
      })
    },
    mounted() {
      console.log(this.$route.path)
      navs.navs.forEach(element => {
        if(element.router == this.$route.path) {
          this.activeMenu = element.index
        }
        if(element.children) {
          element.children.forEach(c => {
            if(c.router == this.$route.path) {
              this.activeMenu = element.index
            }
          })
        }
      });
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log('handleOpen', key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log('handleClose', key, keyPath);
      },
      to(subNav) {
        if (subNav.index == '11-1') {
          acmModel.getTk(res => {
            let url = requestConfig[process.env.NODE_ENV].acmHost + '/api/login?ticket=' + res.data
            window.open( url, '_blank');
          })
          return;
        }
        if (subNav.index == '12-1') {
          acmModel.getTk(res => {
            let url = requestConfig[process.env.NODE_ENV].ctfHost + '/login?ticket=' + res.data
            window.open( url, '_blank');
          })
          return;
        }
        if(subNav.index === this.activeMenu) {
          this.$route.path !== subNav.router && this.$router.replace(subNav.router)
        }else{
          this.$router.push(subNav.router)
          this.activeMenu = subNav.index
        }
      }
    }
  }
</script>

<style lang="scss">
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100vh;
    margin: 0 !important;
  }
  #siderbar {
    width: 200px;
    height: calc(100vh - 60px);
    background-color: #fff;
    position: relative;
    float: left;
    overflow: scroll;
  }
  #siderbar > ul{
    margin-top: 30px;
  }
  #siderbar > ul > li {
    margin-top: 20px;
    margin-left: 20px;
    text-align: left;
    list-style: none;
    cursor: pointer;
  }
  .nav-label{
    margin-left: 10px;
  }
  .active-nav {
    color: #ff9900;
  }
  
</style>
